<template>
  <div class="levle-2 jy-style-height" :id="'Level1outline' + props.info.id">
    <div class="Outline-box outlineClassName" :data-user-url="props.info.audio?props.info.audio.url:''"  :data-user-type="2" :data-user-id="props.info.id" :id="'Outline-box' + props.info.type" @contextmenu.stop="onContextMenu($event)">
      <Outline :info="props.info"  :domShow="props.domShow" />
      <FlotMenu
        :selectInfo="props.info.type"
        v-if="!route.meta.loopType" 
        :childId="props.level2Id"
        :indexs="-1"
        :contextmenuExhibitId="-1"
        :materialType="2"
        :AuxiliaryId="-1"
      />
    </div>

    <draggableList :childId="props.level2Id" :info="props.info" :domShow="props.domShow" />
    <Auxiliary
      :domShow="props.domShow"
      :level1Id="props.level2Id"
      :AuxiliaryId="index"
      :info="item"
      :indexs="index"
      v-for="(item, index) in props.info.auxiliaryList"
      :key="item.id"
    /> 
    <div class="levle-2-child jy-style-height" v-if="props.info.children && props.info.children.length > 0">
      <Level3outline
        :domShow="props.domShow"
        :level1Id="props.level1Id" 
        :level2Id="props.level2Id"
        :level3Id="item.id"
        :info="item"
        :indexs="index"
        v-for="(item, index) in props.info.children"
        :key="item.id"
      />
    </div>
  </div>
</template> 
 
<script setup lang="ts">
import Auxiliary from '@/freeComponents/Auxiliary/index.vue';
import {
  isAnyElementOutOfParent,
  isElementOutOfParent,
  getParentLeftList,
  addParentWidths,
  getParentLeftItem,
} from '@/utils/minxin';
import { DraggableContainer } from 'vue3-draggable-resizable';
import { getDraggableNumber, getRemConversion } from '@/utils/getRemComputed';
import Level3outline from '../Level3outline/Level3outline.vue';
import draggableList from '../draggableComponents/draggableList.vue';
import { ref, nextTick, watch, computed } from 'vue';
import { useProjectStore } from '@/store';
import Outline from './Outline/Index.vue';
import { childItemMenuShow } from '@/hooks/menuHooks';
import { useRoute } from 'vue-router';
import FlotMenu from '@/components/flotMenu/OutlineMenu.vue';

const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
  indexs: {
    type: Number,
  },
  level1Id: {
    type: Number,
  },
  level2Id: {
    type: Number,
  },
  domShow: {
    type: Boolean,
  },
});

const onContextMenu = (e: any) => {
  e.preventDefault();
  if (route.meta.loopType) {
    return;
  }
  store.contextmenuchildId = props.level2Id;
  store.materialType = 2;
  store.contextmenuGroupId = -1;
  store.contextmenuExhibitId = -1;
  childItemMenuShow(e);
};
</script>  

<style scoped lang="less">
.levle-2 {
  display: flex;

  padding-right: 100px;
}
.levle-2-title {
  margin-right: 50px;

  img {
    width: auto;
    height: 100%;
  }
}
.exhibits-box {
  position: relative;

  margin-right: 30px;
  border: 1px solid #e62b17;
  padding: 0 20px;
}
.levle-2-child {
  display: flex;
  width: auto;
}
.Outline-box {
  position: relative;
  // margin-right: 280px;
}
.Outline-box:hover {
  :deep(.flot-menu) {
    display: flex;
    top: 45px !important;
    z-index: 999;
  }
}
#Outline-box12001,
#Outline-box12002,
#Outline-box12003 {
  :deep(.flot-menu) { 
    left: 230px;
  }
}

#Outline-box32001{
:deep(.flot-menu) {
    left: 300px;
  }
}
#Outline-box32002{
:deep(.flot-menu) {
    left: 340px;
  }
}
#Outline-box32003 { 
  :deep(.flot-menu) {
    left: 254px;
  }
}

#Outline-box52001,
#Outline-box52002,
#Outline-box52003,
#Outline-box52004,
#Outline-box52005, 
#Outline-box52006{
  :deep(.flot-menu) {  
    left: 314px;
  }
}
#Outline-box72001{
  :deep(.flot-menu) {   
    left: 344px;
  } 
}
#Outline-box72002{
  :deep(.flot-menu) {   
    left: 364px;
  } 
} 
#Outline-box72003,
#Outline-box72004,
#Outline-box72005,  
#Outline-box72006{
  :deep(.flot-menu) {  
     left: 364px;
  }
}
#Outline-box102002{
  :deep(.flot-menu) {   
    left: 384px;
  } 
} 

#Outline-box152001{
  :deep(.flot-menu) {   
    left: 344px;
  } 
}
</style>